<template>
  <div class="updataUser-container">
    <form action="" ref="form" enctype="multipart/form-data">
      <p>
        <span class="subtitle">头像</span>
        <input type="file" name="touxiang" class="touxiang1" @change="updata()">
        <img :src="user.headportrait_url" >
      </p>
      <p>
        <span class="subtitle">昵称</span>
        <input type="text" :value="user.username" class="username" name="username" @change="updata()">
      </p>
      <p>
        <span class="subtitle">账号</span>
        <span>{{user.account}}</span>
      </p>
      <!-- <button @click.prevent="updata()">确认</button> -->
    </form>
  </div>
</template>
<script>
export default {
  data(){
    return{
    }
  },
  methods:{
    async updata(){
      let formdata=new FormData(this.$refs.form)
      let data=await this.ajax.post({
        url:'/api/updataTouxiang',
        form:this.$refs.form
      })
      if(data.err==0){
        alert("修改成功")
        this.$store.dispatch("setUser",data.data[0])
      }

    },
  },
  computed:{
    user(){
      return this.$store.state.user.user
    }
  }
}
</script>


<style lang="less" scoped>
.updataUser-container{
  .username{
    display:inline-block;
    padding: 0;
    margin: 0;
    text-align: right;
    border: none;
  }
  p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DDD;
    padding: 10px;
    margin: 0;
    position: relative;
    .subtitle{
      color: #000;
      white-space: nowrap;
    }
    img{
      width: 60px;
      height: 60px;
      position: absolute;
      right: 0;
    }
    .touxiang1{
      height: 60px;
      opacity: 0;
    }
  }
  p:last-child{
    border:none
  }
}

</style>